﻿@{
    Layout = "~/Views/Shared/_MallLayout.cshtml";
    string img_url = ViewBag.img_url;
    string keyword = ViewBag.keyword;
    ViewBag.Title = string.IsNullOrEmpty(keyword) ? "商品搜索" : keyword;
}
@section style{
    <link href="~/Scripts/mescroll/mescroll.min.css" rel="stylesheet" />
    <style type="text/css">
        .mescroll {
            position: fixed;
            top: 0;
            bottom: 0;
            height: auto;
        }
    </style>
}
    <body class="page-index page-distributionStore">
        <div class="mescroll" id="mescroll">
            <div class="mod-fallsceshi mt20">
                <div class="masonry" id="dataList">
                </div>
            </div>
        </div>
        <a class="goTop">
            <img src="~/Content/css/tokenmall/img/icon/goTop.png" />
        </a>
    </body>
@section scripts{
    <script src="~/Scripts/tokenmall/masonry-docs.min.js"></script>
    <script src="~/Scripts/tokenmall/imagesloaded.min.js"></script>
    <script src="~/Scripts/mescroll/mescroll.min.js"></script>
    <script>
        $(function () {
            var $container = $('.masonry');
            var total_pages = 1;
            var keyword = "@keyword";
            var isload = false;
            var dataUrl = '/BazaarProduct/_Index';
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false,
                    callback: function (mescroll) {
                        $container.html('');
                        $container.masonry('layout');
                        mescroll.resetUpScroll();
                    }
                },
                up: {
                    callback: askData,
                    page: { num: 0, size: 6 },
                    clearEmptyId: "dataList",
                    isBounce: false,
                    noMoreSize: 3,
                    htmlNodata: '<p class="upwarp-nodata">亲,我是有底线的~</p >',
                    empty: { warpId: "dataList", icon: "", tip: "亲,暂时没有数据哦~" },
                    toTop: {}
                }
            });
            //异步请求数据
            function askData(pager) {
                if (!isload && total_pages >= pager.num) {
                    isload = true;
                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        params: "contentType",
                        data: { page: pager.num, size: pager.size, product_name: keyword },
                        async: true,
                        success: function (res) {
                            var $elems = $(res);
                            var paged = $elems.siblings("page");
                            var rows = Number.parseInt(paged.attr("rows"));
                            var total = Number.parseInt(paged.attr("total_result"));
                            mescroll.endBySize(rows, total);
                            if (paged.length == 1) {
                                total_pages = Number.parseInt(paged.attr("total_pages"));
                                msnryobj.masonryImagesReveal($elems);
                                $('#dataList page').remove();
                            } else {
                                $(".upwarp-nodata").html('亲,暂时没有数据哦~');
                            }
                            isload = false;
                        },
                        error: function (err) {
                            isload = false;
                            mescroll.endErr();
                        }
                    });
                }
            }
            var width = $container.width() / 2;
            var msnryobj = $container.masonry({ itemSelector: '.item', gutter: 0, columnWidth: width, isAnimated: true });
            $.fn.masonryImagesReveal = function ($items) {
                var msnry = this.data('masonry');
                var itemSelector = msnry.options.itemSelector;
                $items.hide();
                this.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    if (!$(image.img).hasClass("profile")) {
                        var $item = $(image.img).parents(itemSelector);
                        $item.show();
                        msnry.appended($item);
                    }
                });
                return this;
            };
        });
    </script>
}

